<template>
  <div>
    <div class="ruleequipment-tab-title-row">
      <div @click="ruleequipmenttype = 1" :class="ruleequipmenttype == 1 ? 'ruleequipmenttype_on' : ''">
        分组设备
      </div>

    </div>
    <div class="control-group-page" :style="ruleequipmenttype == 1 ? 'display:block' : 'display:none'">
      <!-- aside -->
      <div class="manage-page-aside">
        <div class="head-section" style="overflow: hidden">

          <h3 class="table-head">网点列表：</h3>
          <el-select @change="organChangeEvent" v-model="organId" placeholder="请选择" value-key="item">
            <el-option v-for="item in organOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div style="display: flex;justify-content: space-between;">
          <div>
            <el-input v-model="Searchremark" @keydown.enter.native="searchEnter"
              onkeypress="if(event.keyCode == 13) return false;" placeholder="请输入名称内容" clearable
              style="width: 150px; margin-right: 10px"></el-input>
            <el-button type="primary" style="margin-right: 0" @click="onSearchSubmit" class="search-mr">查询</el-button>
          </div>
          <div>
            <el-button @click="handleAddGroup" type="primary" plain size="medium">新增
            </el-button>
            <el-button @click="handleEditGroup" type="primary" plain size="medium" v-if="show">编辑
            </el-button>
            <el-button @click="handleDeleteGroup" type="primary" plain size="medium" v-if="show">删除
            </el-button>
          </div>
        </div>



        <div class="table-section" style="top: 1.05rem">
          <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 100%">
            <el-table ref="refGroupTable" :data="groupTableData" border highlight-current-row
              :row-class-name="tableRowClassName" @row-click="handleCurrentChange">
              <el-table-column type="index" label="序号" width="60">
              </el-table-column>
              <el-table-column prop="name" label="控制组" style="cursor: pointer">
              </el-table-column>
              <!-- <el-table-column prop="name" label="操作" style="cursor: pointer">
                <template slot-scope="scope">
                <el-button @click.stop="handleManagingGroup(scope.row)" type="primary" plain size="medium">管理成员</el-button>
              </template>
              </el-table-column> -->
            </el-table>
          </el-scrollbar>
        </div>
      </div>
      <!-- content -->
      <div class="content manage-page-content">
        <div class="head-section">
          <header>
            <el-button @click="handleAddAreaAppliance" v-if="groupId !=null && show" size="medium" type="primary" plain>添加
            </el-button>
            <el-button @click="handleDeleteAreaAppliance"  v-if="groupId !=null && show"  size="medium" type="primary" plain>移除
            </el-button>
          </header>
          <h3 class="table-head">包含的区域和电器</h3>
        </div>
        <div class="table-section">
          <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 100%">
            <el-table :data="AreaAppliancesData" ref="equipmentTable" @selection-change="handleManageAreaChange" border
              style="width: 100%; margin-top: 10px">
              <el-table-column type="selection" width="40"> </el-table-column>
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="channelName" label="名称"> </el-table-column>
              <el-table-column prop="probeKindName" label="类型"> </el-table-column>
              <el-table-column prop="path" label="区域"> </el-table-column>
            </el-table>
          </el-scrollbar>
        </div>
      </div>
    </div>

    <!-- 新增组弹框 -->
    <el-dialog class="same-dia" :title="isAddNew ? '新增控制组' : '编辑控制组'" :visible.sync="dialogGroupVisible" width="480px"
      @close="resetForm" :close-on-click-modal="false">
      <el-form :rules="rules" :model="pojoGroup" ref="pojoForm" label-width="70px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="pojoGroup.name"></el-input>
        </el-form-item>
        <!-- <el-form-item label="分组类型" prop="groupType">
          <el-select v-model="pojoGroup.groupType" placeholder="请选择分组类型">
            <el-option label="策略分组" value="0"></el-option>
            <el-option label="中控屏分组" value="1"></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button v-if="isAddNew" type="primary" @click="addGroupSubmit('pojoForm')">确 定
        </el-button>
        <el-button v-else type="primary" @click="editGroupSubmit('pojoForm')">确 定
        </el-button>
        <el-button @click="dialogGroupVisible = false">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 添加设备 -->
    <el-dialog title="添加设备" :visible.sync="dialogAddAreaVisible" width="610px" @close="reGetUserBindAreaData"
      :close-on-click-modal="false">
      <div style="margin-bottom:10px">
        <span style="color:#fff;margin-right:10px">所属区域</span>
        <el-select @change="areaChangeEvent" filterable  v-model="areaid" placeholder="请选择" value-key="item">
          <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div>
        <el-transfer :render-content="renderFunc"  :titles="['未加入设备', '已加入设备']" v-model="proadvalue" :data="prodlistdata" :props=prodprops>
        </el-transfer>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="sub-can-btn-box">
          <el-button @click="submitAddManageArea" size="medium" type="primary">确 定
          </el-button>
          <el-button size="medium" @click="dialogAddAreaVisible = false">取 消
          </el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog  title="管理分组人员" :visible.sync="dialoguserGroupVisible" width="610px" @close="reGetUserBindAreaData"
      :close-on-click-modal="false">
      <div style="margin-bottom:10px">
        <el-button type="primary" plain size="medium" @click="handleUserbind()">绑定用户
          </el-button></div>
      <div >
        <el-table
          :data="userGrouplist"
          border
        >
        <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="userName" label="用户名"> </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="phone" label="电话"> </el-table-column>
          <el-table-column prop="name" label="操作" style="cursor: pointer">
            <template slot-scope="scope">
              <el-button
                @click.stop="handleupdateUser(scope.row.id)"
                type="primary"
                plain
                size="medium"
                >绑定布局</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!-- 绑定用户 -->
    <el-dialog
      title="新增绑定用户"
      :visible.sync="dialogBindUserVisible"
      width="610px"
      :close-on-click-modal="false"
    >
      <div class="usertransfer prodtransfer">
        <el-transfer
          :render-content="userrenderFunc"
          ref="usertransfer"
          filterable
          filter-placeholder="请输入用户名称"
          :titles="['未绑定用户', '已绑定用户']"
          v-model="binduserlist"
          :data="alluserlist"
          :props="Userprops"
          @change="submittargetBind"
        >
        </el-transfer>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="sub-can-btn-box">
          <el-button  @click="clear()" size="medium" type="primary"
            >确 定
          </el-button>
          <el-button size="medium" @click="clear()"
            >取 消
          </el-button>
        </div>
      </div>
    </el-dialog>
     <!-- 修改用户布局 -->
     <el-dialog
      title="修改用户布局"
      :visible.sync="dialogupdateUserVisible"
      width="310px"
      :close-on-click-modal="false"
    >
      <div class="usertransfer">
        <span style="color:#fff;margin-right:10px">绑定布局</span>
        <el-select v-model="updateUserlayout.layoutId" clearable placeholder="请选择布局">
        <el-option
          v-for="item in layoutsList"
          :key="item.id"
          :label="item.layoutName"
          :value="item.id">
        </el-option>
      </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="sub-can-btn-box">
          <el-button  @click="submitupdateUserlayout()" size="medium" type="primary"
            >确 定
          </el-button>
          <el-button size="medium" @click="dialogupdateUserVisible=false"
            >取 消
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ajax from "@/utils/ajax";
import { tableSelection, deleteConfirm } from "@/utils/elementui.js";
import axios from "axios";
export default {
  data() {
    return {
      show:false,
      organId: '',
      organOptions: [],
      permission: {
        add: false,
        modify: false,
        delete: false,
        bind_strategy: false,
        add_area_channel: false,
        delete_area_channel: false,
      },
      customerId: "",
      allgroupTableData: [],
      groupTableData: [],
      tableIndex: 0,
      currentGroup: null,
      groupId: null,

      isAddNew: true,
      // 新增组
      dialogGroupVisible: false,
      rules: {
        name: [{ required: true, message: "组名称不能为空", trigger: "blur" }],
      },
      pojoGroup: {
        customerId: this.$store.getters.customerId,
        organId: null,
        name: '',
        groupType:'0'
      },
      // 绑定策略
      dialogBandStrategy: false,
      strategyTableData: [],
      allstrategyTableData: [],
      mulStrategySelection: [],
      dialogStrategyDetali: false,
      operationTableData: [],
      // 区域和电器table
      AreaAppliancesData: [],
      dialogAddAreaVisible: false,
      dialogAreaNodeCheck: [],
      multipleAreaAppSelection: [],
      Searchremark: "",
      ruleequipmenttype: 1,
      //区域
      areaData: [],
      areaid: "",
      proadvalue: [],
      prodlistdata: [],
      prodprops: {
        key: 'id',
        label: 'channelName'
      },
      renderFunc(h, option) {
          return <span title={option.channelName}>{ option.channelName}</span>;
      },
      //分组相关
      //分组id
      screenGroupId:null,
      dialoguserGroupVisible:false,
      userGrouplist:[],
      alluserlist:[],
      Userprops: {
        key: "id",
        label: "name",
      },
      binduserlist:[],
      dialogBindUserVisible: false,
      userrenderFunc(h, option) {
        return <span title={option.name}>{option.name}</span>;
      },
      layoutsList:[],
      layoutsid:null,
      dialogupdateUserVisible: false,
      updateUserlayout:{
        id: null,
        layoutId: null,
        quartzGroupId: null,
        userId: null
      }
    };
  },
  created() {
    this.customerId = this.$store.getters.customerId;

  },
  mounted() {
    this.$store.dispatch("actions/dynamicTitleAction", this.$route.meta.title);
    this.getOrganListData()
    this.getUserListData()
  },

  methods: {

    // 设置可操作的权限
    setPermission() {
      let role_permissions = this.$store.getters.rolePermissions;
      console.log("-----------------------", role_permissions);
      for (let item of role_permissions) {
        if (item.action === "/web/control_group") {
          for (let permission of item.privilegeList) {
            switch (permission.action) {
              case "/web/control_group/add":
                this.permission.add = true;
                break;
              case "/web/control_group/modify":
                this.permission.modify = true;
                break;
              case "/web/control_group/delete":
                this.permission.delete = true;
                break;
              case "/web/control_group/bind_strategy":
                this.permission.bind_strategy = true;
                break;
              case "/web/control_group/add_area_channel":
                this.permission.add_area_channel = true;
                break;
              case "/web/control_group/delete_area_channel":
                this.permission.delete_area_channel = true;
                break;
              default:
                break;
            }
          }
        }
      }
    },
    // 获取网点列表
    getOrganListData() {
      ajax.get({
        url: this.$API.getUserOrgan + this.$store.getters.user.id,
        success: (response) => {
          const resp = response.data;
          if (resp.length > 0) {
            this.organOptions = resp;
            this.organId = resp[0].id
            this.getGroupData()
            this.getAreaListData()
          } else {
            this.organOptions = [];
          }
        },
        error: (res) => {
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    },
    organChangeEvent() {
      this.getGroupData()
      this.getAreaListData()
    },
    // 获取控制组的数据
    getGroupData() {
      ajax.get({
        url: this.$API.getGroupByOrganIdAndType + `${this.organId}/0`,
        success: (response) => {
          const resp = response.data;
          this.allgroupTableData = resp;
          this.groupTableData = resp;
          if (resp.length > 0) {
            this.$nextTick(() => {
              let index = this.tableIndex;
              this.$refs.refGroupTable.setCurrentRow(
                this.$refs.refGroupTable.data[index]
              );
              this.currentGroup = resp[index];
              this.groupId = resp[index].id;
              this.getAreaAppliances();
              this.show=true
            });
          } else {
            this.AreaAppliancesData = [];
            this.show=false
          }
        },
      });
    },
    //获取区域
    getAreaListData() {
      ajax.get({
        url: this.$API.getUserAreaByorgan_Id + this.organId,
        success: (res) => {
          this.areaData = res.data;
          this.areaid = res.data[0].id
        },
        error: (err) => {
          // console.log(err)
          this.$message({
            message: err.message,
            type: "error",
          });
        },
      });
    },
    // 获取控制组包含的区域和电器
    getAreaAppliances() {
      let po_id = this.groupId;
      ajax.get({
        url: this.$API.getChannelByGroup + po_id,
        // data: { id: po_id },
        success: (response) => {
          const resp = response.data;
          let existsprod = []
          this.proadvalue=[]
          this.AreaAppliancesData = resp;
          this.AreaAppliancesData.forEach(data => {
                existsprod.push(data.id)
              })
          this.proadvalue=existsprod
        },
      });
    },

    //处理复选框选中
    checkValue(targetCategoryIds, targetCategoryDataId) {
      if (targetCategoryIds == "0") {
        return true;
      }
      if (targetCategoryIds.indexOf(targetCategoryDataId) !== -1) {
        return true;
      }
    },

    // table每行加上index
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    // 点击
    handleCurrentChange(row) {
      this.currentGroup = row;
      this.groupId = row.id;
      this.tableIndex = row.index;
      this.multipleManageGroupSel = [];
      this.multipleAvailableGroupSel = [];
      this.$nextTick(() => {
        this.getAreaAppliances();
      });
    },

    // 新增控制组
    handleAddGroup() {
      this.isAddNew = true;
      this.dialogGroupVisible = true;
    },
    addGroupSubmit(formName) {
      this.pojoGroup.organId = this.organId
      this.$refs[formName].validate((valid) => {
        if (valid) {
          ajax.post({
            url: this.$API.createQuartzGroup,
            data: this.pojoGroup,
            success: (response) => {
              if (response.success) {
                this.getGroupData();
                this.dialogGroupVisible = false;
                this.$message({
                  message: response.message,
                  type: "success",
                });
              }
            },
            error: (res) => {
              this.$message({
                message: res.message,
                type: "error",
              });
            },
          });
        }
      });
    },

    // 编辑控制组
    handleEditGroup() {
      if (this.currentGroup) {
        this.isAddNew = false;
        this.dialogGroupVisible = true;
        this.$nextTick(() => {
          this.pojoGroup.id = this.currentGroup.id;
          this.pojoGroup.name = this.currentGroup.name;
          this.pojoGroup.organId = this.currentGroup.organId;
          this.pojoGroup.groupType = this.currentGroup.groupType;
        });
      } else {
        this.$message({
          message: "请先选择要编辑的控制组",
          type: "warning",
        });
      }
    },
    editGroupSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          ajax.post({
            url: this.$API.modifyQuartzGroup + this.pojoGroup.id,
            data: this.pojoGroup,
            success: (response) => {
              if (response.success) {
                this.getGroupData();
                this.dialogGroupVisible = false;
                this.$message({
                  message: response.message,
                  type: "success",
                });
              }
            },
            error: (res) => {
              this.$message({
                message: res.message,
                type: "error",
              });
            },
          });
        }
      });
    },

    // 删除组
    handleDeleteGroup() {
      if (this.currentGroup) {
        let groupObj = this.currentGroup;
        let po_id = groupObj.id;
        deleteConfirm(this).then((res) => {
          if (res) {
            ajax.post({
              url: this.$API.deleteQuartzGroup + po_id,
              success: (response) => {
                if (response.success) {
                  this.tableIndex = 0;
                  this.getGroupData();
                  this.$message({
                    message: response.message,
                    type: "success",
                  });
                }
              },
              error: (response) => {
                this.$message({
                  message: response.message,
                  type: "error",
                });
              },
            });
          }
        });
      } else {
        this.$message({
          message: "请先选择要删除的组",
          type: "warning",
        });
      }
    },

    // 绑定策略
    handleBandStrategy() {
      let po_id = this.groupId;
      ajax.post({
        url: this.$API.getGroupStrategy,
        data: { id: po_id },
        success: (response) => {
          // console.log(response)
          this.getControlStrategyData(response.rs.rows);
        },
        error: (response) => {
          this.$message({
            message: response.message,
            type: "error",
          });
        },
      });
      this.dialogBandStrategy = true;
    },
    // 获取控制策略数据
    getControlStrategyData(resData) {
      let po_id = this.customerId;
      ajax.post({
        url: this.$API.getControlStrategy,
        data: { id: po_id },
        success: (response) => {
          // console.log(response)
          const resp = response.data;

          // 处理数据：getGroupStrategy方法获取的组对应的控制数据
          let selectedArr = [];
          for (let item of resp) {
            for (let resItem of resData) {
              if (item.id === resItem.strategyId) {
                item.enabled = resItem.enabled;
                item.selected = true;
                selectedArr.push(item);
              }
            }
          }
          this.allstrategyTableData = resp;
          this.strategyTableData = resp;
          // console.log(resp)
          this.$nextTick(() => {
            this.toggleSelection(selectedArr);
          });


        },
      });
    },


    // 已绑定的策略打勾
    toggleSelection(rows) {
      // console.log(rows)
      if (rows) {
        rows.forEach((row) => {
          this.$refs.refStrategyTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.refStrategyTable.clearSelection();
      }
    },
    // 显示策略的详细信息
    showStrategyDetail(rowData) {

      this.getStrategyOperationData(rowData.id);
      this.dialogStrategyDetali = true;
    },
    // 获取控制策略包含的操作列表
    getStrategyOperationData(id) {
      let po_id = id;
      ajax.post({
        url: this.$API.getStrategyOperation,
        data: { id: po_id },
        success: (response) => {
          const resp = response.data;
          this.operationTableData = resp;
        },
      });
    },
    handleStrategyChange(value) {
      this.mulStrategySelection = value;
    },
    strategyEnable(row) {
      row.enabled = row.enabled == 1 ? 0 : 1;
    },

    // 添加电器弹窗
    handleAddAreaAppliance() {
      this.dialogAddAreaVisible = true;
      this.checkList = [];
      this.prodlistdata = []
      this.getProbeChannel()
    },
    areaChangeEvent() {
      if (this.areaid) {
        this.getProbeChannel()
      }
    },
    //获取探头
    getProbeChannel() {
      ajax.get({
        url: this.$API.getProbeChannelInfoByAreaId + this.areaid,
        success: (response) => {
          if (response.success) {
            if (response.data.length > 0) {
          
              
             
              this.prodlistdata = response.data
            }
            else{
              this.prodlistdata =[]
            }
          }
        },
        error: (res) => {
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    },
    dialogTreeChange() {
      let checkArr = this.$refs.refdialogAreaTree.getCheckedNodes();
      this.dialogAreaNodeCheck = checkArr;
      // console.log(checkArr)
    },
    submitAddManageArea() {

      let self = this
      if (this.proadvalue.length == 0) {
        this.$message({
          message: "请先选择探头",
          type: "warning",
        });
        return;
      }
      axios
        .post(this.$API.bindGroupChannel + this.groupId, this.proadvalue)
        .then(function (res) {
          if (res.data.success) {
            self.$message({
              message: "新增成功",
              type: "success",
            });
            self.dialogAddAreaVisible = false;
            this.getAreaAppliances();
          }
        });

    },

    // 重新获取绑定区域的数据
    reGetUserBindAreaData() {
      if( this.groupId !=null){
      this.getAreaAppliances();
    }
    },

    // 移除包含的区域和电器
    handleManageAreaChange(value) {
      this.multipleAreaAppSelection = value;
    },
    handleDeleteAreaAppliance() {
      let po_id = this.groupId;
      let self = this
      let selectionArr = this.multipleAreaAppSelection;
      let selResult = tableSelection(selectionArr, 0);
      // console.log(selectionArr)
      if (selResult) {
        deleteConfirm(this).then((res) => {
          if (res) {
            let idsArr = [];
            for (let item of selectionArr) {
              idsArr.push(item.id);
            }
            // let ids = idsArr.join(",");
            let ids = idsArr;
            axios
              .post(this.$API.removeGroupAndProbeChannel + po_id, ids)
              .then(function (res) {
                if (res.data.success) {
                  self.getAreaAppliances();
                  self.$message({
                    type: "success",
                    message: res.data.message,
                  });
                }
              });

          }
        });
      }
    },


    // 重置表单
    resetForm() {
      this.$refs["pojoForm"].resetFields();
    },

    onSearchSubmit() {
      this.groupTableData = [...this.allgroupTableData];
      this.groupTableData = this.groupTableData.filter((data) =>
        data.name.includes(this.Searchremark)
      );
    },
    searchEnter(e) {
      let keyCode = e.keyCode;
      if (keyCode == 13) {
        this.onSearchSubmit();
      }
    },

    //分屏相关

    // 获取用户列表
    getUserListData() {
      let customerId = this.$store.getters.customerId;
      ajax.get({
        url: this.$API.getUserListByCustomerId + customerId,
        success: (response) => {
          //console.log(response)
          if (response.data != null && response.data.length > 0) {

            this.alluserlist = response.data
          } else {
            this.alluserlist = [];
          }
        },
        error: (res) => {
          //console.log(res)
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    },
    //管理分屏用户和获取分屏布局
    handleManagingGroup(row){
      this.screenGroupId=row.id
      this.dialoguserGroupVisible=true
      this.getBindUserList()
      this.getGroupLayoutsByUserAndGroupList()
    },
    // 编辑控制组
    handleUserbind() {
     this.dialogBindUserVisible=true
     if(this.layoutsList.length>0){
      this.layoutsid = this.layoutsList[0].id
     }
    
    },
    submittargetBind(value, direction, movedKeys) {
      let self = this;
      //添加
      if (direction == "right") {
        
        const list = movedKeys.map(data => ({
          quartzGroupId: this.screenGroupId,
          userId: data,
          layoutId: this.layoutsid
        }))
        console.log(list)
        axios
          .post(this.$API.bindUserQuartzGroupTarget, list)
          .then(function (res) {
            if (res.data.success) {
             return
            }
          });
      }
      //移除
      else {
        axios
          .post(this.$API.unBindUserQuartzGroupTarget + self.screenGroupId, movedKeys)
          .then(function (res) {
            if (res.data.success) {
              return
            }
          });
      }
    },
    //清理搜索
    clear(){
      this.dialogBindUserVisible = false
      this.getBindUserList()
      this.$refs.usertransfer.clearQuery('left')
      // 清空右边搜索
      this.$refs.usertransfer.clearQuery('right')
    },
    //获取用户或分组下布局
    getGroupLayoutsByUserAndGroupList(){
      let self = this;
      let params = new URLSearchParams(); 
      //type 1为分组 0为用户
      params.append("groupId", this.screenGroupId);
      params.append("userId", '');
      axios
      .post(self.$API.getGroupLayoutsByUserIdAndGroupId, params)
      .then(function (res) {
        if (res.data.success) {
          if (res.data.data!='' && res.data.data.length > 0) {
              self.layoutsList = []
              res.data.data.forEach((item, index) => {
                const { groupId, id, layoutName } = item
                const newLayoutName = layoutName || `布局${index + 1}`
                self.layoutsList.push({ groupId, id, layoutName: newLayoutName })
              })
            }
            else{
              self.layoutsList =[]
            }
        }
      });
    },
    //获取分组包含用户信息
    getBindUserList(){
      ajax.get({
        url: this.$API.getBindUserListByGroupId + this.screenGroupId,
        success: (response) => {
          if (response.success) {
            if (response.data!='' && response.data.length > 0) {
              this.binduserlist =[]
              this.userGrouplist = response.data
              response.data.forEach(data=>{
                this.binduserlist.push(data.id)
              })
            }
            else{
              this.userGrouplist =[]
              this.binduserlist =[]
            }
          }
        },
        error: (res) => {
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    },
    //获取用户布局信息
    handleupdateUser(id){
      this.updateUserlayout.userId=id
      this.getUserQuartzGroupTargetByUserIdAndGroupId()
      this.dialogupdateUserVisible=true
    },
    //获取用户或分组下布局
    getUserQuartzGroupTargetByUserIdAndGroupId(){
      ajax.get({
        url: this.$API.getUserQuartzGroupTargetByUserIdAndGroupId + `${this.updateUserlayout.userId}/${this.screenGroupId}`,
        success: (response) => {
          if (response.success) {
            if (response.data) {
              this.$nextTick(() => {
              this.updateUserlayout = response.data
              })
            }
          }
        },
        error: (res) => {
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    
    },
    //更新用户布局
    submitupdateUserlayout(){
      ajax.post({
        url: this.$API.updateUserQuartzGroupTarget,
        data:this.updateUserlayout,
        success: (response) => {
          if (response.success) {
            this.$message({
                type: "success",
                message:'更新成功',
              });
              this.dialogupdateUserVisible=false
          }
        },
        error: (res) => {
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    }
  },
};
</script>

<style lang="stylus" scoped>
.ruleequipment-tab-title-row {
  height: 0.5rem;
  background-color: #0d2c5a;
  border-bottom: solid 0.01rem #0d235a;
  -webkit-box-shadow: inset 0px 5px 20px 0px rgba(80, 160, 191, 0.5);
  box-shadow: inset 0px 5px 20px 0px rgba(80, 160, 191, 0.5);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 0.1rem;

  div {
    width: 2rem;
    height: 0.44rem;
    line-height: 0.44rem;
    margin-left: 0.08rem !important;
    border-radius: 5px 5px 0px 0px;
    border: solid 1px #0d235a !important;
    border-bottom: 0 !important;
    margin-top: 0.06rem !important;
    color: #fff !important;
    font-size: 0.16rem !important;
    padding: 0 20px;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
  }

  .ruleequipmenttype_on {
    background-color: #16214d !important;
    color: #fff !important;
  }
}

>>> {
  .control-group-page {
    position: absolute;
    top: 0.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.2rem;
    overflow: auto;

      .head-section {
        .table-head {
          /* margin-top 0.2rem */
          height: 0.43rem;
          line-height: 0.43rem;
          font-size: 0.16rem;
          font-weight: normal;
          float: left;
        }

        header {
          float: right;
        }
      
    }

    .table-section {
      position: absolute;
      top: 0.72rem;
      left: 0.2rem;
      right: 0.2rem;
      bottom: 0.2rem;
    }

    .content {
      .content-head {
        text-align: right;
      }

      .area-table-section {
        position: absolute;
        top: 0.66rem;
        left: 0.2rem;
        right: 0.2rem;
        bottom: 0.2rem;
      }
    }
  }

  .dialog-left {
    .table-head {
      height: 0.3rem;
      margin-top: 0.2rem;
      font-size: 0.16rem;
      font-weight: normal;
    }

    .table-section {
      position: absolute;
      top: 1.2rem;
      left: 0.2rem;
      right: 0.2rem;
      bottom: 0.2rem;
    }

    .dia-table-section {
      height: 300px;
    }
  }

  .el-table__body tr {
    cursor: pointer;
  }

  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row > td {
    color: #fff;
    background-color: rgba(68, 199, 244, 0.2) !important;
  }

  .el-table__body-wrapper {
    overflow-y: auto !important;
  }

  .el-table .el-checkbox__label {
    color: #fff;
  }

  .el-button.is-round {
    padding: 3px 6px;
  }

  .temperature-txt {
    padding: 0 0.1rem;
    font-size: 0.16rem;
    color: #fff;
  }

  .el-select--mini {
    width: 60px;

    .el-input--suffix .el-input__inner {
      padding-right: 20px;
      padding-left: 10px;
    }
  }

  .air-table-item {
    margin-right: 0.1rem;
  }

  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner, .el-radio__input.is-disabled.is-checked .el-radio__inner {
    background: #409EFF;
  }

  .el-button {
    padding: 0.12rem 0.16rem;
  }

  .el-dialog__footer {
    padding-top: 0;
    padding-bottom: 0.3rem;
  }

  .el-form-item:last-child {
    margin-bottom: 0 !important;
  }

  .area-add {
    width: 380px;
    margin: 0 auto;

    .el-select {
      width: 300px;
    }
  }
}

.equipment-title {
  display: flex;
  margin-bottom: 10px;
}

>>>.equipment-title .el-checkbox__label {
  color: #fff;
}

>>>.equipment-title .el-checkbox {
  min-width: 81px;
  margin-right: 10px;
}

.working-hours-container {
  position: absolute;
  top: 0.5rem;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.2rem;
  overflow: auto;
  background-color: $pageBg;
}

.e-t-r-equipment-row {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 7rem;
  padding: 0.2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #16214d;
  overflow: auto;
}
.e-t-r-equipment-row {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 7rem;
  padding: 0.2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #16214d;
  overflow: auto;
}

.e-t-r-rule-row {
  position: absolute;
  left: 7rem;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0.19rem 0.2rem;
  overflow: auto;
  background: #202c5f;
}

>>>.el-table--striped .el-table__body tr.el-table__row--striped.current-row td, >>>.el-table__body tr.current-row > td {
  color: #fff;
  background-color: rgba(68, 199, 244, 0.2) !important;
}

.e-t-r-rule-box {
  display: flex;
}

.left, .right {
  width: 360px;
  height: 8.1rem;
  padding: 10px;
  border: 1px solid #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.dialog-group-btn {
  width: 200px;
  padding: 0.2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.dialog-group-btn .el-button {
  display: block;
  margin: 0.2rem auto;
}
.dialogrule_worktype .el-radio {
    margin-bottom: 10px;
}
>>>.el-dialog .prodtransfer input {
  color: #000;
}

</style>
